<template>
  <div class="header">
    <div class="logo-box" @click="jumpTo">
      <img src="../../assets/logo-mini.png" alt="未来校招">
    </div>
    <div class="search-form">
      <input v-model="keywords" type="text" placeholder="搜职位、搜公司..." @keyup.enter="toSearch">
      <button @click="toSearch">搜索</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'top-search-nav',
  data(){
    return {
      keywords: ''
    }
  },
  watch: {
    '$router'(val) {
      this.keywords = this.$route.query.keywords || '';
    }
  },
  created() {
  },
  mounted(){
    this.$nextTick(()=>{
      let timer = setTimeout(()=>{
        this.keywords = this.$route.query.keywords || '';
        clearTimeout(timer);
        timer = null;
      }, 300)
    })
  },
  methods: {
    jumpTo(){
      this.$router.push({
        path: '/'
      })
    },
    toSearch () {
      this.$router.push({
        path: 'job',
        query: {
          keywords: this.keywords
        }
      })
    },
  }
}
</script>

<style lang="stylus" scoped>
  .header
    position fixed
    top 0
    left 0
    z-index 10
    padding-left 20px
    height 55px
    line-height 55px
    width 100%
    display flex
    align-items center
    background #fff

    .logo-box
      flex 0 0 28px
      height 28px
      line-height 28px
      font-size 0

      img
        vertical-align middle
        height 100%

  .search-form
    margin-left 15px
    height 35px
    position relative
    display flex
    align-items center

    input
      height 100%
      width 249px
      padding 0 20px
      border-radius 17.5px
      border 0
      background #f6f7f8

    button
      line-height 35px
      width 60px
      background transparent
      color $color-main



</style>
